<template>
    <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      background-color="#ffffff"
      text-color="#67757f"
      active-text-color="#30a4fc"
      :default-active="onRoutes"
      router
      :collapse="collapse"
    >
     <template v-for="item in items">
         <template>
                <el-menu-item :index="item.index" :key="item.index">
                    <i :class="item.icon"></i>
                    {{item.title}}
                </el-menu-item>
         </template>
     </template>
    </el-menu>
  </div>
</template>

<script>
import bus from "../assets/js/bus"
export default{
    data(){
        return{
            collapse:false,
            items:[
                {
                    icon:'el-icon-document',
                    index:'Info',
                    title:'系统首页'
                },
                {
                    icon:'el-icon-document',
                    index:'Consumer',
                    title:'用户管理'
                },
                {
                    icon:'el-icon-document',
                    index:'Singer',
                    title:'歌手管理'
                },
                {
                    icon:'el-icon-document',
                    index:'SongList',
                    title:'歌单管理'
                },
            ]
        }
    },
    computed:{
        onRoutes(){
            return this.$route.path.replace('/','');
        }
    },
    created(){
    }
}
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  background-color: #334256;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 150px;
}
.sidebar > ul {
  height: 100%;
}
</style>